<template>
  <div class="container">
    <div class="userinfo">
      <el-form
        label-position="right"
        label-width="80px"
        :model="info"
        ref="info"
        class="userinfo"
      >
        <el-form-item label="姓名">
          <el-input v-model="info.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="info.sex" label="0">女</el-radio>
          <el-radio v-model="info.sex" label="1">男</el-radio>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="info.id_card"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号">
          <el-input v-model="info.bank_card"></el-input>
        </el-form-item>
        <el-form-item label="班级" v-if="roleid == 1">
          <el-input v-model="info.classname" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="辅导员" v-if="roleid == 1">
          <el-input v-model="info.instructor" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="info.password"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="modify_info">修改</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { request } from "../request/http";
import qs from "qs";
export default {
  data() {
    return {
      info: {
        name: "",
        id_card: "",
        bank_card: "",
        classname: "",
        instructor: "",
        sex: "",
      },
    };
  },
  name: "info",
  computed: {
    ...mapState({
      username: (state) => state.name,
      roleid: (state) => state.role,
      userid: (state) => state.user_id,
      userinfo: (state) => state.userinfo,
    }),
  },
  methods: {
    modify_info() {
      if (this.info.id_card != "" && this.info.id_card.length != 18) {
        this.$message("身份证为18位");
        return;
      }
      if (this.info.bank_card != "" && this.info.bank_card.length != 16) {
        this.$message("银行卡号为16位");
        return;
      }
      request({
        url: "/modify-userinfo/",
        method: "post",
        data: qs.stringify(this.info),
      })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    fill_info() {
      // var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
      this.info.name = this.username;
      this.info.sex = this.userinfo.sex;
      // 判断身份证和银行卡号是否存在
      if (this.userinfo.id_card) {
        this.info.id_card = this.userinfo.id_card;
      }
      if (this.userinfo.bank_card) {
        this.info.bank_card = this.userinfo.bank_card;
      }
      if (this.roleid == 1) {
        this.info.classname = this.userinfo["student_class"]["classname"];
        this.info.instructor = this.userinfo["instructor_id"]["instructor"];
        this.info.user_id = this.userid;
      }
    },
  },
  mounted() {
    this.fill_info();
  },
};
</script>

<style>
.userinfo {
  width: 300px;
  margin-top: 20px;
}
</style>
